<template>
  <div id="warn" :class="show ? 'open' : ''" >
    <div class="tip"  :class="show ? 'tipopen' : ''" >
      <header>
        <div></div>
        <span>{{ $t("language.vip.warn") }}</span>
        <div class="clcire" @click.stop="close">
          <van-icon name="cross" size="14" color="#b5bac8" />
        </div>
      </header>
      <p>
        {{ $t("language.vip.text4") }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from "vue";
let show = ref(false);
let open = () => {
  show.value = true;
};
let close = () => {
  show.value = false;
};
defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.open {
  height: 100vh!important;
  opacity: 1 !important;
}
.tipopen{
    height: 78vh!important;
    opacity: 1 !important;
}
#warn {
  width: 100vw;
  height:0;
  overflow: hidden;
  position: fixed;
  z-index: 99999999;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  .tip {
    width: 90%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
    top: 13%;
    height: 0px;
    opacity: 0;
    overflow: hidden;
    transition: all 0.2s ease-out;
    border-radius: 15px;
    background-color: rgb(50, 53, 62);

    padding: 0 20px;
    p {
      padding: 30px 0 40px 0;
      font-size: 14px;
      color: #b5bac8;
      line-height: 26px;
    }
    header {
      height: 57px;
      @include flex(row, space-between, center);

      border-bottom: 1px solid #4a4c53;
      div {
        width: 28px;
        height: 28px;
        border-radius: 14px;
      }
      span {
        font-size: 18px;
        color: #fff;
        font-weight: bold;
      }
      .clcire {
        border: 2px solid #b5bac8;
        @include flex(row, center, center);
      }
    }
  }
}
</style>
